import React, { useState } from 'react';
import { connect } from 'umi';
import { Input, Space, Card, Button, Form, Row, Col } from 'antd';
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
import { encrypt } from '@/utils/format';
import UploadInput from '@/components/UploadInput';

import './card.less';

const PasswordChange = ({ dispatch }) => {
  const [form] = Form.useForm();

  const [oldPassVal, setoldPassVal] = useState('');
  const [newPassVal, setnewPassVal] = useState('');

  const oldPassWord = e => {
    setoldPassVal(e.target.value);
  };
  const newPassWord = e => {
    setnewPassVal(e.target.value);
  };
  const upPassword = () => {
    dispatch({
      type: 'smManInforRule/upPassword',
      payload: {
        passwordNew: encrypt(oldPassVal),
        passwordOld: encrypt(newPassVal),
      },
    });
  };
  return (
    <div className="site-card-border-less-wrapper">
      <Card bordered={false} id="Card">
        <Space direction="vertical">
          <Form name="info" layout="vertical" form={form}>
            <Row>
              <Col span="24">
                <Form.Item label="头像修改">
                  <UploadInput type="image" />
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span="24">
                <Form.Item label="原密码" name="oldPassVal">
                  <Input.Password
                    placeholder="请输入原密码"
                    onChange={e => {
                      oldPassWord(e);
                    }}
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span="24">
                <Form.Item label="新密码" name="newPassVal">
                  <Input.Password
                    placeholder="请设置新密码"
                    onChange={e => {
                      newPassWord(e);
                    }}
                    iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span="24">
                <Form.Item label="确认密码" name="comPassWord">
                  <Input.Password
                    placeholder="请再次输入新密码"
                    // onChange={()=>{PassWord()}}
                    iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span="24">
                <Button
                  type="primary"
                  block
                  id="button"
                  onClick={() => {
                    upPassword();
                  }}
                >
                  确认
                </Button>
              </Col>
            </Row>
          </Form>
        </Space>
      </Card>
    </div>
  );
};

export default connect(({ loading }) => ({
  loading: loading.models.smManInforRule,
}))(PasswordChange);
